<template>
    <div class="admin_address_wrap"  @touchmove.stop="stop_slider" @touchstart="start_slider">
      <div class="select_stair_type" v-if="city_wrap" @touchmove.prevent>

        <div @touchmove.stop="stop_slider1" @touchstart="start_slider1">
          <p>
            <span>请选择</span>
            <b @click="city_wrap=false">x</b>
          </p>
          <ul ref="scroll_wrap1">
            <li @click="selet_city_type('北京市')">北京市</li>
          </ul>
        </div>
      </div>
      <div class="select_stair_type" v-if="diqu_wrap" @touchmove.prevent>

        <div @touchmove.stop="stop_slider1" @touchstart="start_slider1">
          <p>
            <span>请选择</span>
            <b @click="diqu_wrap=false">x</b>
          </p>
          <ul ref="scroll_wrap1">
            <li v-for="(item , index) in city_list.beijing" @click="selet_diqu_type(item.city)">{{item.city}}</li>
          </ul>
        </div>
      </div>
      <div class="select_stair_type" v-if="range_wrap" @touchmove.prevent>

        <div @touchmove.stop="stop_slider1" @touchstart="start_slider1">
          <p>
            <span>请选择</span>
            <b @click="range_wrap=false">x</b>
          </p>
          <ul ref="scroll_wrap1">
            <li v-for="item in range_list" @click="selet_range_type(item)">{{item}}</li>
          </ul>
        </div>
      </div>

        <div class="add_header">
           <p>{{title}}</p><span @click="cancle"></span>
        </div>
         <div class="add_body"  ref="scroll_wrap">
            <ul>
              <li>
                <span>姓名</span>
                <div>
                  <input type="text" v-model="name" placeholder="请输入姓名">
                </div>
              </li>
              <li>
                <span>电话</span>
                <div>
                  <input type="number" v-model="phone" placeholder="请输入电话">
                </div>
              </li>
              <li>
                <span>所在城市</span> <p @click="city_wrap=true">{{city?city:'请选择城市'}}</p>
              </li>
              <li>
                <span>所在地区</span> <p @click="city&&(diqu_wrap=true)">{{diqu?diqu:'请选择地区'}}</p>
              </li>
              <li>
                <span>所在范围</span> <p @click="city&&diqu&&(range_wrap=true)">{{range?range:'请选择范围'}}</p>
              </li>
              <li>
                <span>详细地址</span>
                 <div>
                   <input type="text" v-model="detial" placeholder="请输入详细地址">
                 </div>
              </li>
            </ul>
         </div>
         <div @click="add_adress" class="add_footer">
            保存
         </div>
    </div>
</template>

<script>
  import {stop_slider} from 'assets/base/base'
  import {get_city,add_address} from 'api/address'
  import {get_cookie} from 'assets/cookie/cookie'
    export default {
        name: "addres",
      props:['title','data'],
      data(){
          return{
            city_wrap:false,
            diqu_wrap:false,
            range_wrap:false,
            city:'',
            diqu:'',
            range:'',
            name:'',
            phone:'',
            detial:'',
            city_list:[],
            range_list:[],
            isloading:false
          }
      },
      created(){
          console.log(this.data)
        if(this.data){
          this.city=this.data.region.split('-')[0]
          this.diqu=this.data.region.split('-')[1]
          this.range=this.data.region.split('-')[2]
          this.name=this.data.names
          this.phone=this.data.phone
          this.detial=this.data.address
        }

        get_city({}).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.errno===0) {
            this.city_list = res.data.data
            console.log(this.city_list)
          }
        })
      },
      methods:{
        selet_city_type(city){
           this.city=city
          this.city_wrap=false
        },
        selet_diqu_type(diqu){
           this.diqu=diqu
          this.diqu_wrap=false
          for(let i=0;i<this.city_list.beijing.length;i++){
             console.log(this.city_list.beijing)
            if(this.city_list.beijing[i].city===diqu){
               this.range_list=this.city_list.beijing[i].county
              break
            }
          }
          this.range=this.range_list[0]
        },
        selet_range_type(range){
          this.range=range
          this.range_wrap=false
        },
        start_slider(e){
          this.start={
            X:e.touches[0].pageX,
            Y:e.touches[0].pageY
          }
        },
        stop_slider(e){
          stop_slider(e,this.$refs.scroll_wrap,this.start)
        },
        start_slider1(e){
          this.start=e.touches[0].pageY
        },
        stop_slider1(e){
          stop_slider(e,this.$refs.scroll_wrap1,this.start)
        },
        add_adress(){
          let reg=/^1\d{10}$/
          if(this.name&&reg.test(this.phone)&&this.city&&this.diqu&&this.range&&this.detial&&!this.isloading){
           this.isloading=true
            add_address({
              token:get_cookie('key'),
              id:this.data&&this.data.addrId,
              region:this.city+'-'+this.diqu+'-'+this.range,
              names:this.name,
              phone:this.phone,
              addr:this.detial,
            }).then((res)=>{
              this.isloading=false
              console.log(res)
              if(res.status===200&&res.data.resStatus===0) {
                 this.$emit('add_address_ok',this.data&&this.data.addrId,this.data&&this.data.addrId&&res.data.data)
              }else{
                alert(res.data.message)
              }
            })
          }else{
            alert("没填写完整或手机号格式不正确")
          }
        },
        cancle(){
          this.$emit('cancle')
        }
      },
      components:{
      }
    }
</script>

<style scoped lang="scss">
  .select_stair_type{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    z-index: 10;
    >div{
      overflow: hidden;
      width: 300px;
      position: absolute;
      left: 50%;
      top: 47%;
      transform: translateX(-50%)translateY(-50%);
      background-color: #fff;
      border-radius: 10px;
      >p{
        overflow: hidden;
        padding: 8px;
        >span{
          float: left;
          margin-top: 5px;
          color: #aaa;
          margin-left: 10px;
        }
        >b{
          float: right;
          width: 20px;
          height: 20px;
          font-size: 18px;
          line-height: 20px;
          color: #bbb;
        }
      }
      >ul{
        overflow: auto;
        max-height: 350px;
        -webkit-overflow-scrolling: touch;
        margin-right: -30px;
        padding-right: 30px;
        >li{
          height: 40px;
          line-height: 40px;
          border-top: 1px solid #eee;
        }
        >.active{
          color: #aaa;
        }
      }
    }
  }
    .admin_address_wrap{
      position: fixed;
      background: rgba(100, 100, 100, 0.8);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 12;
    }
    .add_header{
      position: absolute;
      height: 45px;
      width: 100%;
      background-color: #eee;
      z-index: 1;
      >p{
        height: 45px;
        line-height:45px;
        color: #999;
      }
      >span{
        position: absolute;
        right: 10px;
        top: 13px;
        height: 15px;
        width: 15px;
        background-image: url('../assets/img/x.png');
        background-size: 100% 100%;
      }
    }
    .add_footer{
      position: absolute;
      bottom: 10px;
      height: 35px;
      background: #019fe8;
      width: 80%;
      left: 10%;
      line-height: 35px;
      margin: 0 auto;
      color: #fff;
      letter-spacing: 1px;
      border-radius: 5px;
    }
 .add_body{
   padding-bottom: 54px;
   padding-top: 45px;
   height:100%;
   width: 100%;
   background-color: #fff;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   >ul{
     >li{
       height: 40px;
       line-height:40px;
       border-bottom: 1px solid #ddd;
       padding-top: 1px;
       >span{
         float: left;
         height: 40px;
         width: 80px;
         margin-left: 15px;
         margin-right: 10px;
         font-size: 14px;
         text-align: left;
       }
       >p{
         overflow: hidden;
         height: 30px;
         margin-top: 5px;
         margin-right: 20px;
         border: 1px solid #ddd;
         border-radius: 10px;
         line-height: 30px;
         text-align: left;
         padding-left: 10px;
         color: #888;
       }
       >div{
         overflow: hidden;
         height: 40px;
         >input{
           height: 16px;
           line-height: 16px;
           display: block;
           width: 100%;
           margin-top:11px;
           border: none;
           outline: none;
           text-align: left;
           padding-right: 10px;
           font-size: 13px;
         }
         input::-webkit-input-placeholder{
           font-size:14px;
         }
       }
     }
   }
 }
  .content{
    height: 200px;
    margin-top: 50px;
    background: #f10;
  }
</style>
